import "./App.scss";
import Tab from "./components/Tab";
import Comment from "./components/Comment";
import CommentList from "./components/CommentList";
import { useComment } from "./hooks/useComment";

function App() {
  const { commentList, setcommentList } = useComment();

  const delListHandler = (id) => {
    setcommentList((prev) => prev.filter((item) => item.rpid !== id));
  };

  return (
    <div className="App">
      {/* 导航 Tab */}
      <Tab commentList={commentList} setcommentList={setcommentList} />
      {/* 评论区域 */}
      <Comment commentList={commentList} setcommentList={setcommentList} />
      {/* 评论列表 */}
      {commentList.map((item) => (
        <CommentList
          key={item.id}
          item={item}
          delListHandler={delListHandler}
        />
      ))}
    </div>
  );
}

export default App;
